<template>
  <div>
    <el-col class="first-col">
      <el-row class="first-row"><!--借阅公告-->
        <el-col>
          <el-row class="notice-title"> 借阅公告</el-row>
          <el-row class="notice-content">学生读者借阅的书籍数量不超过 6 本，老师读者不超过 10 本。</el-row >
          <el-row class="notice-content">每本书可借阅 15 天，逾期一天罚款 0.1 元。</el-row >
          <el-row class="notice-content">如果图书损坏或丢失，按图书价值进行赔偿。</el-row>
        </el-col>
      </el-row>
      <el-row class="second-third-row" ><!--借阅查找-->
        <el-col >
          <el-row style="height: 15%"><!--文字-借阅查找-->
            <span class="title-font">借阅查找</span>
            <div class="title-bottom"></div>
          </el-row>
          <el-row class="search">
            <el-col style="height:100%;width:100%;">
                <el-row class="searchBar"><!--搜索框-->
                    <el-col class="search-col">
                        <el-row class="searchBG"><!--搜索框的米色背景板-->
                            <el-col style="height:100%;width:10%;display: flex;justify-content: center;align-items: center;"><!--搜索图标-->
                                <img src="../../assets/img/common/search.png" class="img-search">
                            </el-col>
                            <el-col style="height:100%;width:76%;display: flex;"><!--输入框-->
                                <input placeholder="请输入书刊名称、关键字或作者" class="input-search" v-model="keywords">
                            </el-col>
                            <el-col style="height:100%;width:14%;display: flex;align-items: center;justify-content: center;"><!--搜索按钮-->
                                <button class="search-btn" @click="toSearchBooks()">搜索</button>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row class="searchResult"><!--搜索结果展示-->
                  <el-col v-for="item in searchBooks" :key="item" class="book-col">
                    <el-row class="book-img-col"><img :src="item.img" class="search-img"></el-row>
                    <el-row class="search-font">{{ item.name }}</el-row>
                    <el-row class="search-btn-row">
                      
                      <button v-if="!item.isBorrow" class="search-btn-bottom-ok" @click="borrowItem(item)">借阅</button><!--没有被借阅-->
                      <button v-if="item.isBorrow" class="search-btn-bottom-not">已借阅</button>
                    </el-row>
                  </el-col>
                </el-row>
            </el-col>
          </el-row>
          <el-row>

          </el-row>
        </el-col>
      </el-row>
      <el-row class="second-third-row"><!--借阅清单-->
        <el-col>
          <el-row style="height: 15%"><!--文字-借阅清单-->
            <span class="title-font">借阅清单</span>
            <div class="title-bottom"></div>
          </el-row>
          <el-row class="showBorrowBooks"><!--展示借阅清单-->
            <el-col style="height:100%;width:100%;">
              <el-row class="showBorrow-main"><!--书籍展示-->
                <el-col v-for="item in waitBooks" :key="item" class="showBorrow-col"><!--这里后端传过来的是已借阅但没有扫码的-->
                  <el-row class="borrowBooksImg-row">
                    <img :src="item.img" class="borrowImg">
                  </el-row>
                  <el-row class="borrowBooksFont">{{ item.name }}</el-row>
                  <el-row class="borrowNum">
                    <el-input-number v-model="item.num" :min="1" :max="10"  size="mini"></el-input-number>
                  </el-row>
                </el-col>
              </el-row>
              <el-row class="showBorrow-btn"><!--生成借阅码-->
                <button class="code" @click="dialogVisible=true"><span class="code-font">生成借阅码</span></button>
                <!--生成二维码的对话框-->
                <el-dialog
                     :visible.sync="dialogVisible"
                     width="50%">
                     <el-col style="width:100%;height:350px;display: flex;flex-direction: column;align-items: center;">
                      <el-row class="dialog-notice">
                        <span class="dialog-font-red">温馨提示：</span>
                        <span class="dialog-font-black">每次借阅生成唯一二维码，使用后失效。如出现突发情况，请联系管理员。</span>
                      </el-row>
                      <el-row class="code-produce-row">
                        <img :src="code" class="code_photo">
                      </el-row>
                     </el-col>

                     <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
       </el-row>
      <el-row style="width: 100%; height: 200px; background-color: white"><!--bottom-->
        <bottom></bottom>
      </el-row>
    </el-col>
  </div>
</template>

<script>
import axios from "axios";
import bottom from "@/components/userCommon/bottom.vue";
export default {
  name: "borrow",
  components: {
    bottom,
  },
  mounted(){
    this.getWaitBooks()
    this.getAllBook()
  },
  data() {
    return {
      searchBooks:[
          
      ],
      waitBooks:[
           
      ],
      num:1,
      dialogVisible:false,
      keywords:'',
      userId:'24123',
      code:require("D:/librarycover/" + '498' + ".png")
    };
  },
  methods: {
    borrowItem(book) {
    axios({
        method:'get',
        url:'http://localhost:5000/reader/borrowClick',
        params:{
          'userId':this.userId,
          'bookName':book.name
    
        }
       
    }).then(r=>{//发送成功
      if(r.data.data.result==='借阅成功！'){
         // 进行借阅逻辑处理
    // 模拟借阅成功
    book.isBorrow = true;
    
    // 显示成功的消息提示框
    this.$message({
      message: '借阅成功',
      type: 'success'
    });
    this.getWaitBooks()
      }else{
        //借阅失败
        this.$message.error(r.data.data.content);
      }
    }).catch(r=>{
        console.log(r)
    })
  },
  toSearchBooks(){
    axios({
        method:'get',
        url:'http://localhost:5000/reader/searchLibraryBooks',
        params:{
          'keywords':this.keywords
    
        }
       
    }).then(r=>{//发送成功
      this.searchBooks = r.data.data.books.map((book) => ({
            img: require("D:/librarycover/" + book.img + ".jpg"),
            name: book.name,
            isBorrow:book.isBorrow
          }));
    }).catch(r=>{
        console.log(r)
    })
  },
  getWaitBooks(){
    axios({
        method:'get',
        url:'http://localhost:5000/reader/waitToCode',
        params:{
          'userId':this.userId
    
        }
       
    }).then(r=>{//发送成功
     
      this.waitBooks = r.data.data.books.map((book) => ({
            img: require("D:/librarycover/" + book.img + ".jpg"),
            name: book.name,
            num:1
          }));
    }).catch(r=>{
        console.log(r)
    })
  },
  getAllBook(){
    axios({
        method:'get',
        url:'http://localhost:5000/reader/getLibraryAll',
        params:{
         'userId':this.userId
    
        }
       
    }).then(r=>{//发送成功

      this.searchBooks = r.data.data.map((book) => ({
            img: require("D:/librarycover/" + book.img + ".jpg"),
            name: book.name,
            isBorrow:book.isBorrow
          }));
    }).catch(r=>{
        console.log(r)
    })
  },
  // produceCode(){
  //   this.dialogVisible=true
  //   axios({
  //       method:'get',
  //       url:'http://localhost:5000/reader/produceCode',
  //       params:{
  //        'userId':this.userId
    
  //       }
       
  //   }).then(r=>{//发送成功
  //           // this.code= require("D:/librarycover/" + r.data.data + ".png")
  //           const imagePath = 'D:/librarycover/' + r.data.data + '.png'
  //           this.code = imagePath
  //   }).catch(r=>{
  //       console.log(r)
  //   })
  // }

  },
};
</script>
<style scoped>
.first-col {
  display: flex;
  background-color: rgba(237, 237, 237, 1);
  padding-top: 50px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.first-row {
  display: flex;
  width: 85%;
  height: 200px;
  margin-bottom: 30px;
  background-color: rgba(205, 198, 189, 1);
  border-radius: 50px;
}
.second-third-row {
  display: flex;
  width: 70%;
  height: 550px;
  margin-bottom: 50px;
}
.notice-title {
  height: 30%;
  text-align: center;
  font-weight: bold;
  font-size: 25px;
  margin-top: 20px;
}
.notice-content {
  text-align: center;
  letter-spacing: 2px;
  font-size: 20px;
  margin-bottom: 5px;
}
.title-font {
  font-size: 30px;
  letter-spacing: 3px;
  font-weight: bold;
  margin-left: 30px;
}
.title-bottom {
  background-color: rgba(168, 189, 203, 1);
  width: 200px;
  height: 10px;
  border-radius: 5px;
}
.search{
    height: 85%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-items: center;
  }
  .searchBar{
    width:100%;
    height:25%;
  }
  .searchResult{
    width:100%;
    height:75%;
    padding-left:50px;
    padding-right: 50px;
    overflow: auto;
  }
  .searchResult::-webkit-scrollbar{
     width: 0px; /* 设置滚动条的宽度 */
  }
  .searchBG{
    width:80%;
    height:50%;
    background-color: rgba(229, 229, 229, 1);
    border-radius: 55px;
  }
  .search-col{
    width:100%;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .img-search{
    width:auto;

    height:80%;
  }
  .input-search{
    width:100%;
    background-color: transparent;
    border-color:transparent;
    outline: none;
    font-size:18px;
  }
  .search-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    height:70%;
    width:85%;
    border-radius: 40px;
    background-color: #394A79;
    color:white;
    border:transparent;
    font-size:18px;
    cursor: pointer;
    letter-spacing: 1.5px;
  }
  .book-col{
    width:25%;
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .book-img-col{
    width:100%;
    height:70%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .search-img{
    width:auto;
    height:90%;
    border-radius:15px ;
    box-shadow:10px 10px 15px 3px rgba(0,0,0,0.25);
  }
  .search-font{
    width:100%;
    height:10%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .search-btn-row{
    width:100%;
    height:20%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .search-btn-bottom-ok{
    width:45%;
    height:50%;
    font-size:18px;
    background-color: rgba(125, 153, 191, 1);
    color:white;
    border-color:transparent;
    border-radius: 10px;
    cursor: pointer;

  }
  .search-btn-bottom-not{
    width:45%;
    height:50%;
    font-size:18px;
    background-color: rgba(166, 166, 166, 1);
    color:white;
    border-color:transparent;
    border-radius: 10px;
    cursor: pointer;
  }
  .showBorrowBooks{
    width:100%;
    height:480px;
    background-color:white;
    border-radius: 50px;
  }
  .showBorrow-main{
    width:100%;
    height:80%;
    overflow: auto;
  }
  .showBorrow-main::-webkit-scrollbar{
     width: 0px; /* 设置滚动条的宽度 */
  }
  .showBorrow-btn{
    width:100%;
    height:20%;
    display: flex;
    align-items: center;
    justify-content: right;
    padding-right: 60px;
  }
  .showBorrow-col{
    width:25%;
    height:100%;
  }
  .borrowBooksImg-row{
    width:100%;
    height:80%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .borrowBooksFont{
    width:100%;
    height:10%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .borrowNum{
    width:100%;
    height:10%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .borrowImg{
    height:80%;
    width:auto;
    border-radius:15px ;
    box-shadow:10px 10px 15px 3px rgba(0,0,0,0.25);
  }
  .code{
    width:120px;
    height:40px;
    border-radius: 10px;
    background-color:rgba(125, 153, 191, 1);
    border-color:transparent;
    cursor: pointer;
  }
  .code-font{
    color:white;
    font-size:15px;
  }
.dialog-notice{
  width:70%px;
  height:60px;
  background-color: rgba(230, 218, 205, 1);
  border-radius: 15px;
  margin-left: 10px;
  margin-right:10px;
  display: flex;
  align-items: center;
}
.dialog-font-red{
  font-size: 17px;
  color:rgba(212, 48, 48, 1);
  font-weight: bold;
  margin-left:40px;
}
.dialog-font-black{
  font-size:15px;
  color:rgba(0, 0, 0, 1);

}
.code-produce-row{
  width:400px;
  height:250px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top:20px;
}
.code_photo{
  height:250px;
  width:auto;
}
</style>
